<template>
  <div class="view-container">
    <b-table>
      <!--  搜索栏  -->
      <template #query>
        <query-form>
          <el-form :ref="options.queryForm.ref" :model="queryModel" :inline="true" label-position="left">
          </el-form>

          <template #footer>
            <el-button icon="RefreshLeft" @click="resetQuery" size="small" auto-insert-space>重置</el-button>
            <el-button type="primary" icon="Search" v-loading="loading.query" @click="handleQuery" size="small"
              auto-insert-space>
              搜索
            </el-button>
          </template>
        </query-form>
      </template>

      <!--  按钮栏  -->
      <template #toolbar>
        <toolbar :tableModel="tableModel" :options="options" @fetchTableData="fetchTableData"
          @pageNumChange="pageNumChange" @pageSizeChange="pageSizeChange" @saveColumnSetting="saveColumnSetting"
          @resetColumn="resetColumnSetting">
          <toolbar-item v-hasPerm="'sysDictData:insert'">
            <el-button @click="handleAdd" type="success" icon="Plus" size="small" plain auto-insert-space>
              新增
            </el-button>
          </toolbar-item>

          <toolbar-item v-hasPerm="'sysDictData:edit'">
            <el-button @click="handleEdit(tableModel.selectedRow[0])" :disabled="disabled.edit" type="primary"
              icon="Edit" size="small" plain auto-insert-space>
              编辑
            </el-button>
          </toolbar-item>

          <toolbar-item v-hasPerm="'sysDictData:export'">
            <export-excel @export-all="handleExport(true)" @export-current="handleExport(false)" />
          </toolbar-item>

          <toolbar-item v-hasPerm="'sysDictData:upload'">
            <upload-excel :show="upload.show" :limit="upload.limit" :headers="upload.headers" :action="upload.action"
              :strategy="upload.param" @handleFileUploadProgress="handleFileUploadProgress"
              @handleFileSuccess="handleFileSuccess" @closeUpload="closeUpload" @submitUpload="submitUpload"
              @handleUpload="handleUpload" />
          </toolbar-item>

          <toolbar-item v-hasPerm="'sysDictData:delete'">
            <el-button @click="handleDelete()" v-loading="loading.delete" :disabled="disabled.delete" type="danger"
              icon="Delete" size="small" plain auto-insert-space>
              删除
            </el-button>
          </toolbar-item>
        </toolbar>
      </template>

      <!--  表格栏  -->
      <el-table :ref="options.table.ref" v-loading="loading.table" :data="tableModel.data"
        :header-cell-class-name="handleHeaderCellClass" @sort-change="handleSortChange"
        @selection-change="handleSelectionChange" @current-change="clickTableRow" @row-dblclick="handleEdit"
        height="100%" width="100%" :cell-class-name="cellClassName" :size="tableModel.size" :stripe="tableModel.stripe"
        :border="tableModel.border">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column v-if="tableModel.index" type="index" label="行号" width="70" align="center" fixed />

        <template v-for="(item, index) in tableModel.columns" :key="index">
          <el-table-column v-if="item.show" :column-key="item.prop" :prop="item.prop" :width="item.width"
            :sortable="item.sortable" :fixed="item.fixed" :label="item.label" :formatter="item.formatter"
            :show-overflow-tooltip="item.showOverflowTooltip" align="center" />
        </template>
      </el-table>

      <!--  编辑框  -->
      <el-dialog v-model="editForm.show" :title="editForm.title" :close-on-click-modal="false" @close="handleClose"
        center append-to-body draggable>
        <el-form :ref="options.editForm.ref" :model="editForm.data" :rules="rules" label-width="100px">
          <el-form-item label="主键ID" prop="id">
            <el-input v-model="editForm.data.id" placeholder="请输入主键ID"/>
          </el-form-item>
          <el-form-item label="字典数据标签" prop="dataLabel">
            <el-input v-model="editForm.data.dataLabel" placeholder="请输入字典数据标签"/>
          </el-form-item>
          <el-form-item label="字典类型" prop="typeValue">
            <el-input v-model="editForm.data.typeValue" placeholder="请输入字典类型"/>
          </el-form-item>
          <el-form-item label="字典数据" prop="dataValue">
            <el-input v-model="editForm.data.dataValue" placeholder="请输入字典数据"/>
          </el-form-item>
          <el-form-item label="字典类型状态: 0-停用 1-正常" prop="state">
            <el-input v-model="editForm.data.state" placeholder="请输入字典类型状态: 0-停用 1-正常"/>
          </el-form-item>
          <el-form-item label="是否默认: 0-否 1-是" prop="defaultFlag">
            <el-input v-model="editForm.data.defaultFlag" placeholder="请输入是否默认: 0-否 1-是"/>
          </el-form-item>
          <el-form-item label="显示顺序" prop="orderNum">
            <el-input v-model="editForm.data.orderNum" placeholder="请输入显示顺序"/>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="editForm.data.remark" placeholder="请输入备注"/>
          </el-form-item>
        </el-form>

        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="handleSubmit" auto-insert-space>确定</el-button>
            <el-button @click="handleClose" auto-insert-space>取消</el-button>
          </div>
        </template>
      </el-dialog>
    </b-table>
  </div>
</template>

<script setup name="DictData">
import {
  list,
  listExcelHeader,
  add,
  update,
  exportData,
  deleteData
} from '@/api/system/dictData'
import useCrud from '@/hook/useCrud'

const { proxy } = getCurrentInstance()

const options = {
  model: {
    idProp: 'id',
    tipsProp: 'name',
  },
  view: {
    refreshView: () => {
      fetchTableData()
    }
  },
  queryForm: {
    ref: 'queryFormRef',
    params: {}
  },
  table: {
    ref: 'tableRef',
    columnSettingRef: 'columnSettingRef',
    columnStoreKey: 'dictData',
    pageSizes: [100, 200, 500, 1000]
  },
  editForm: { ref: 'editFormRef', },
  action: {
    query: { api: list },
    delete: { api: deleteData },
    download: { api: exportData },
    upload: { api: undefined, fetchHeaderApi: listExcelHeader },
    add: { api: add },
    edit: { api: update },
  }
}
const {
  queryModel,
  tableModel,
  upload,
  loading,
  disabled,
  resetColumnSetting,
  saveColumnSetting,
  handleSelectionChange,
  handleHeaderCellClass,
  handleSortChange,
  handleQuery,
  resetQuery,
  fetchTableData,
  pageNumChange,
  pageSizeChange,
  clickTableRow,
  handleDelete,
  handleExport,
  handleUpload,
  closeUpload,
  handleFileUploadProgress,
  handleFileSuccess,
  submitUpload,

  editForm,
  handleAdd,
  handleEdit,
  handleSubmit,
  handleClose
} = useCrud(proxy, options)

const rules = {}

function cellClassName(val) {
  // console.log(val)
}

options.view.refreshView()
</script>
<style scoped lang="scss">
.view-container {
  display: flex;
  height: 100%;
}
</style>
